<template>
  <div class="dashboard-container">
     <!-- 页头走马灯 -->
     <el-carousel :interval="4000" type="card" height="500px">
       <el-carousel-item v-for="item in topPics" :key="item">
         <img :src="item" class="topPics">
       </el-carousel-item>
     </el-carousel>

     <br>
     <br>

     <el-row>
       <div class="two">
         <el-col :span="6">
           <el-card :body-style="{ padding: '0px' }" shadow="hover">
             <div style="padding: 14px 10px 0px;">
               <span class="t1_1">垃圾分类主题活动</span>
             </div>
             <img src="@/assets/img/垃圾分类主题活动.png" style="height: 250px; width: 325px; padding: 10px;">
             <div style="padding: 5px 14px 14px;">
               <span>吉林高新区共青团开展“垃圾分类志愿者在行动”主题活动</span>
               <div class="bottom clearfix">
                 <el-button type="text" class="button">
                   <a href="https://m.sohu.com/a/741180804_121039860?_trans_=010004_pcwzy">>>了解详情</a>
                 </el-button>
               </div>
             </div>
           </el-card>
         </el-col>

         <el-col :span="6" :offset="2">
           <el-card :body-style="{ padding: '0px' }" shadow="hover">
             <div style="padding: 14px 10px 0px;">
               <span class="t1_1">跳蚤市场</span>
             </div>
             <img src="@/assets/img/跳蚤市场.png" style="height: 250px; width: 325px; padding: 10px;">
             <div style="padding: 5px 14px 14px;">
               <span>“跳蚤市场”逛一逛 北京大兴经开区社区开展“时尚”垃圾分类</span>
               <div class="bottom clearfix">
                 <el-button type="text" class="button">
                   <a href="https://m.sohu.com/a/741180804_121039860?_trans_=010004_pcwzy">>>了解详情</a>
                 </el-button>
               </div>
             </div>
           </el-card>
         </el-col>

         <el-col :span="6" :offset="2">
           <el-card :body-style="{ padding: '0px' }" shadow="hover">
             <div style="padding: 14px 10px 0px;">
               <span class="t1_1">志愿服务活动</span>
             </div>
             <img src="@/assets/img/志愿服务活动.png" style="height: 250px; width: 325px; padding: 10px;">
             <div style="padding: 5px 14px 14px;">
               <span>黄渤海新区福莱山街道依云社区：“清洁家园，小小少年，垃圾分类，从我做起”志愿服务活动</span>
               <div class="bottom clearfix">
                 <el-button type="text" class="button">
                   <a href="https://m.sohu.com/a/741180804_121039860?_trans_=010004_pcwzy">>>了解详情</a>
                 </el-button>
               </div>
             </div>
           </el-card>
         </el-col>
       </div>
     </el-row>


     <!-- <el-row>
       <img src="@/assets/img/lajitong.jpg" style="height: 300px; padding: 10px 50px;">
     </el-row> -->

     <br>
     <br>

     <el-row class="three">
        <div class="b2">
          <h2>垃圾分类知识</h2>
        </div>
        <div class="n2">
          <div class="part1">
            <a style="font-weight: bold;">垃圾可以分为四大类:</a>
            <br>
            <li>① 厨余垃圾：厨房产生的食物类垃圾以及果皮等。</li>
            <li>② 可回收垃圾：再生利用价值较高，能进入废品回收渠道的垃圾。</li>
            <li>③ 有害垃圾：含有有毒有害化学物质的垃圾。</li>
            <li>④ 其他垃圾：除去可回收垃圾、有害垃圾、厨房垃圾之外的所有垃圾的总称。</li>
            <br>
            <a style="font-weight: bold;">垃圾分类的意义:</a>
            <br>
            <li>01减少占地</li>
            <li>生活垃圾中有些物质不易降解，使土地受到严重侵蚀。垃圾分类，去掉可以回收的、不易降解的物质，减少垃圾数量达60%以上。</li>
            <li>02减少污染</li>
              <li>目前我国的垃圾处理多采用卫生填埋甚至简易填埋的方式，占用上万亩土地;并且虫蝇乱飞，污水四溢，臭气熏天，严重污染环境。土壤中的废塑料会导致农作物减产;抛弃的废塑料被动物误食，导致动物死亡的事故时有发生。因此回收利用还可以减少危害。</li>
          </div>
          <div class="part2">
              <li>03变废为宝</li>
              <li>中国每年使用塑料快餐盒达40亿个，方便面碗5~7亿个，一次性筷子数十亿双，这些占生活垃圾的8~15%。1吨废塑料可回炼600公斤的柴油。回收1500吨废纸，可免于砍伐用于生产1200吨纸的林木。一吨易拉罐熔化后能结成一吨很好的铝块，可少采20吨铝矿。生活垃圾中有30%~40%可以回收利用，应珍惜这个小本大利的资源。大家也可以利用易拉罐制作笔盒，既环保，又节约资源。而且，垃圾中的其他物质也能转化为资源，如食品、草木和织物可以堆肥，生产有机肥料;垃圾焚烧可以发电、供热或制冷;砖瓦、灰土可以加工成建材等等。各种固体废弃物混合在一起是垃圾，分开就是资源。如果能充分挖掘回收生活垃圾中蕴含的资源潜力，仅北京每年就可获得11亿元的经济效益。可见，消费环节产生的垃圾如果及时进行分类，回收再利用是解决垃圾问题的最好途径。</li>
          </div>
        </div>
     </el-row>

     <br>
     <br>

     <el-row class="four">
        <div class="b3">
          <h2>四类垃圾</h2>
        </div>

        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item  name="1">
            <template slot="title" style="font-weight: bold;">
              <div style="font-weight: bold; font-size: 16px;">可回收物</div><div style="padding: 5px;"><i class="header-icon el-icon-info"></i></div>
            </template>
            <div>
              <div class="left">
                <li>定义：可回收物(再生资源)是指回收后经过再加工可以成为生产原料或者经过整理可以再利用的物品，主要包括废纸类、塑料类、玻璃类、金属类、电子废弃物类、织物类等。</a></li>
                <li>主要种类：</a></li>
                <li>废纸类--—报纸、纸箱板、图书、杂志、各种本册、其它干净纸张、各类利乐包装牛奶袋、饮料盒(需冲洗晾干)。</a></li>
                <li>塑料类--—各种塑料饮料瓶、塑料油桶、塑料盆(盒)。</a></li>
                <li>玻璃类--—玻璃瓶、平板玻璃、镜子。</a></li>
                <li>金属类--—铝质易拉罐，各类金属厨具、餐具、用具，其它民用金属制品。</a></li>
                <li>电子废弃物类--—各类家用电器产品。</a></li>
                <li>织物类--—桌布、衣服、书包等。</a></li>
                <el-button type="text" class="button">
                  <a href="https://www.baidu.com">>>了解详情</a>
                </el-button>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title" style="font-weight: bold;">
              <div style="font-weight: bold; font-size: 16px;">有害垃圾</div><div style="padding: 5px;"><i class="header-icon el-icon-info"></i></div>
            </template>
            <div>
              <div class="left">
                <li>定义：有毒有害垃圾是指对人体健康有害的重金属、有毒的物质或者对环境造成现实危害或者潜在危害的废弃物。</a></li>
                <li>主要包括:</a></li>
                <li>废药品、废杀虫剂、废消毒剂、废油漆、废溶剂、废矿物油、废化妆品、废胶片、废相纸、废荧光灯管、废温度计、废血压计、废充电电池、废扣子电池、碱性电池、锂电池、镍镉电池等。</a></li>
                <el-button type="text" class="button">
                  <a href="https://www.baidu.com">>>了解详情</a>
                </el-button>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item  name="3">
            <template slot="title" style="font-weight: bold;">
              <div style="font-weight: bold; font-size: 16px;">厨余垃圾</div><div style="padding: 5px;"><i class="header-icon el-icon-info"></i></div>
            </template>
            <div>
              <div class="left">
                <li>定义：狭义的厨余垃圾是有机垃圾的一种，分为熟厨余包括剩菜、剩饭、菜叶；生厨余垃圾包括果皮、蛋壳、茶渣、骨、贝壳。泛指家庭生活饮食中所需用的来源生料及成品(熟食)或残留物。但广义的厨余垃圾还包括用过的筷子，食品的包装材料等。</a></li>
                <el-button type="text" class="button">
                  <a href="https://www.baidu.com">>>了解详情</a>
                </el-button>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item  name="4">
            <template slot="title" style="font-weight: bold;">
              <div style="font-weight: bold; font-size: 16px;">不可回收物</div><div style="padding: 5px;"><i class="header-icon el-icon-info"></i></div>
            </template>
            <div>
              <div class="left">
                <li>定义：包括除上述几类垃圾之外难以回收的废弃物，通常根据垃圾特性采取焚烧或者填埋的方式处理。</li>
                <li>主要包括：</li>
                <li>使用过的卫生纸、传真纸、照片、离型纸、蜡纸、转印纸、塑料光面废纸、卫生巾、婴儿纸尿布、餐巾纸、烟蒂、陶瓷制品、衣服、鞋类、石棉瓦、白板、木质玩具、雨鞋、木质家具、橡胶制品、轮胎等。</a></li>
                <el-button type="text" class="button">
                  <a href="https://www.baidu.com">>>了解详情</a>
                </el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>

     </el-row>

     <br />
     <br />

  </div>

</template>

<script>
import { getIndexData } from "@/api/index.js";
export default {
  name: 'Dashboard',
  mounted () {
    getIndexData().then((result) => {
        console.log(result);
        //TODO
    });
  },
  data() {
    return {

      topPics: [
        require("@/assets/img/top1.jpg"),
        require("@/assets/img/top1.jpg"),
        require("@/assets/img/12.png")
      ],

      activeNames: ['1'],

    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .topPics {
    height: 550px;
    width: 720px;
  }

  .two {
    padding-left: 8%;
  }

  .t1_1 {
    font-weight: bold;
    color: darkcyan;
  }


  .three {
    background-color: #4791DA;
  }

  .b2 {
    color: white;
    text-align: center;
  }

  .n2 {
    color: black;
    background-color: whitesmoke;
    padding: 20px;
  }

  .b3 {
    text-align: center;
  }

</style>
